<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>数据列表</title>

    <!-- layui 公用样式 -->
    <link href="static/layui/css/layui.css" media="all" rel="stylesheet">
    <link href="static/layui/font/font-awesome.min.css" rel="stylesheet">
    <link href="static/layui/css/style.css" rel="stylesheet">
    <script charset="utf-8" src="static/layui/layui.js"></script>

</head>
<body>
<div id="medicalrecords">
    <div class="layui-row">
        <form action="" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">关键词：</label>
                <div class="layui-input-inline">
                    <input class="layui-input" id="keyword" placeholder="请输入关键词" type="text"/>
                </div>
                <label class="layui-form-label">状态：</label>
                <div class="layui-input-inline">
                    <select id="status">

                        <option></option>
                        <option value="0">等待获取</option>
                        <option selected value="2">获取完成</option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <input class="layui-btn" id="queryBtn" lay-filter="queryBtn" lay-submit type="submit" value="查询"/>
                </div>
                <div class="layui-form-mid layui-word-aux" id="msg"></div>
            </div>
        </form>
    </div>

    <!-- tab 选项 -->
    <div class="layui-tab layui-width layui-row">
        <div class="layui-col-xs8">
            <table class="layui-show" id="dcmTable" lay-filter="dcmTable"></table>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-check">
                <div class="layui-check-look">
                    <h4 class="green">检查所见：</h4>
                    <p id="examFindings" style="text-align: center">
                        <img src="static/img/nodata.png" width="110px"/>
                        <span class="green">请选择一条数据</span>
                    </p>
                </div>
                <div class="layui-check-effect">
                    <h4 class="green">检查印象：</h4>
                    <p id="examImpression" style="text-align: center">
                        <img src="static/img/nodata.png" width="110px"/>
                        <span class="green">请选择一条数据</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    let ctx = localStorage.getItem('ctx')
    layui.use(['table', 'element'], function () {
        let table = layui.table,
            $ = layui.jquery,
            form = layui.form;

        // 表格数据渲染
        table.render({
            id: 'datalist',
            elem: '#dcmTable',
            // 开启头部工具
            toolbar: '#toolbarDemo',
            url: ctx + "/dcmlist/find_dcm_download_list",
            method: 'post',
            headers: {'Authorization': 'Bearer ' + sessionStorage.getItem('access_token')},
            where: {
                status: $("#status").val()
            },
            contentType: 'application/json',
            defaultToolbar: [],
            page: true,
            cols: [
                [
                    {width: '80', title: '序号', templet: d => d.LAY_INDEX},
                    {field: 'study_uid', width: '200', align: 'left', title: 'StudyUID'},
                    {
                        field: 'status', width: '100', align: 'left', title: '获取状态', templet: d => {
                            switch (d.status) {
                                case 0:
                                    return "<span class='waiting'>等待获取</span>"
                                case 2:
                                    return "<span class='complete'>获取完成</span>"
                            }
                        }
                    },
                    {field: 'body_part', width: '100', title: '检查部位'},
                    {field: 'modality', width: '100', align: 'left', title: '检查模式'},
                    {field: 'create_time', width: '200', title: '创建时间'},

                ]
            ],
            even: true,
            size: 'sm',
            text: {
                none: '未查询到数据'
            },
        })

        // 监听 Table 中的行点击事件
        table.on('row(dcmTable)', function (obj) {
            let data = obj.data;
            $(".layui-table-body tr ").attr({"style": "background:#FFFFFF"})
            // 改变当前 tr 颜色
            $(obj.tr.selector).attr({"style": "background:#A5E3DE"})
            $("#examFindings").text($.trim(data.finding))
            $("#examImpression").text($.trim(data.impression))
        });

        form.on('submit(queryBtn)', function (data) {
            table.reload('datalist', {
                where: {
                    keyword: $("#keyword").val(),
                    status: $("#status").val()
                },
                page: {
                    curr: 1,
                    limit: $("#pageSize").val()
                }
            })
            return false
        });

    })
</script>

</body>
</html>